<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">管理门店</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="dialogVisible = true"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <div class="merchant-title mer-m-b-8">
          {{ storeForm.userShortName }}
        </div>
        <div class="merchant-box">
          <div class="merchant-item-content">
            <span>门店名称：{{ storeForm.rpsName }}</span>
            <span
              >门店省市区：{{ storeForm.provinceName }}/{{
                storeForm.cityName
              }}/{{ storeForm.areaName }}</span
            >
            <span>门店地址：{{ storeForm.address }}</span>
            <span>创建时间：{{ storeForm.produceTime }}</span>
          </div>
          <div class="merchant-item-content">
            <span>负责人：{{ storeForm.contactName }}</span>
            <span>联系方式：{{ storeForm.encryContactPhone }}</span>
            <span>联系邮箱：{{ storeForm.email }}</span>
          </div>
        </div>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i><span class="haruyuki-ml-6">{{ posTitle.modelTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          class="merchant-icon-func"
          v-for="moduleItem in moduleData"
          :key="moduleItem.id"
          @click="moduleOperate(moduleItem.id)"
        >
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>
    </section>
    <el-dialog
      :title="`编辑${storeForm.rpsName}`"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <avue-form ref="serveForm" :option="storeOption" v-model="storeForm" @submit="storeSubmit"></avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getDetail, updateRpi } from "@/api/rb-service/posStore/pos_store";
import { getRegion } from "@/api/system/dict";
import { isMobile } from "@/util/validate";

export default {
  components: {},
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (!isMobile(value)) {
        callback(new Error("手机号码不正确！"));
      } else {
        callback();
      }
    };
    return {
      posTitle: {
        basicTitle: "门店信息",
        modelTitle: "门店管理",
      },
      dialogVisible: false,
      moduleData: [
        {
          id: 1,
          name: "音响管理",
          image: "/img/merchant-icon/sound.png",
          show: true,
        },
        {
          id: 2,
          name: "终端管理",
          image: "/img/merchant-icon/terminal.png",
          show: true,
        },
        {
          id: 3,
          name: "打印机管理",
          image: "/img/merchant-icon/printer.png",
          show: true,
        },
        {
          id: 4,
          name: "收银员管理",
          image: "/img/merchant-icon/cashier.png",
          show: true,
        },
      ],
      rpiNo: "",
      storeId: "",
      loading: false,
      storeForm: {},
      storeOption: {
        column: [
          {
            label: "主键",
            prop: "id",
            type: "input",
            sortable: true,
            display: false,
            hide: true,
          },
          {
            label: "门头名称",
            prop: "rpiNo",
            type: "select",
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "门店编号",
            prop: "rpsNo",
            type: "input",
            sortable: true,
            slot: true,
            display: false,
            overHidden: true,
          },
          {
            label: "门店名称",
            prop: "rpsName",
            type: "input",
            search: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入门店名称",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "创建日期",
            prop: "produceTime",
            type: "input",
            sortable: true,
            display: false,
            overHidden: true,
          },
          {
            label: "省份",
            prop: "province",
            slot: true,
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "地市",
            prop: "city",
            slot: true,
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "区县",
            prop: "area",
            slot: true,
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "省份/地市/区县",
            labelWidth: 130,
            prop: "provinceCityArea",
            type: "cascader",
            props: {
              label: "name",
              value: "code",
            },
            lazy: true,
            async lazyLoad(node, resolve) {
              let stop_level = 2;
              let level = node.level;
              let data = node.data || {};
              let code = data.code;
              let list = [];
              let callback = () => {
                resolve(
                  (list || []).map((ele) => {
                    return Object.assign(ele, {
                      leaf: level >= stop_level,
                    });
                  })
                );
              };
              if (level == 0) {
                await getRegion(code).then(
                  (res) => {
                    list = res.data.data;
                    callback();
                  },
                  (error) => {
                    window.console.log(error);
                  }
                );
              } else if (level == 1) {
                await getRegion(code).then(
                  (res) => {
                    list = res.data.data;
                    callback();
                  },
                  (error) => {
                    window.console.log(error);
                  }
                );
              } else if (level == 2) {
                await getRegion(code).then(
                  (res) => {
                    list = res.data.data;
                    callback();
                  },
                  (error) => {
                    window.console.log(error);
                  }
                );
              } else {
                callback();
              }
            },
            span: 24,
            showColumn: false,
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择省份/地市/区县",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "门店地址",
            prop: "address",
            type: "textarea",
            span: 24,
            minRows: 2,
            rules: [
              {
                required: true,
                message: "请输入详细地址",
                trigger: "blur",
              },
            ],
            overHidden: true,
            width: 200,
          },
          {
            label: "负责人",
            prop: "contactName",
            search: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入负责人",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "联系方式",
            prop: "contactPhone",
            search: true,
            rules: [
              {
                required: true,
                validator: validatePhone,
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "联系邮箱",
            prop: "email",
            rules: [
              {
                required: true,
                message: "请输入联系邮箱",
                // validator: validatePhone,
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
        //   {
        //     label: "门店状态",
        //     prop: "storeStatus",
        //     type: "select",
        //     dicUrl: "/api/blade-system/dict/dictionary?code=store_status",
        //     props: {
        //       label: "dictValue",
        //       value: "dictKey",
        //     },
        //     dataType: "string",
        //     showColumn: false,
        //     display: false,
        //     rules: [
        //       {
        //         required: true,
        //         message: "请输入门店状态",
        //         trigger: "blur",
        //       },
        //     ],
        //   },
        ],
      },
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {
    /**
     * @func 门店信息编辑提交
     * @desc 提交已修改的门店信息
     * */
    storeSubmit(row, done, loading) {
      updateRpi(row).then(
        () => {
          this.infoData();
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.serveForm.resetForm();
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
        case 1:
          this.$router.push({ path:'/rb-service/posinfo/terminal/store/sound',query:{title:'音响',rpiNo:this.storeForm.rpiNo,rpsNo:this.storeForm.rpsNo}})
          break;
        case 2:
          this.getTerminalPage();
          break;
        case 3:
          this.$router.push({ path:'/rb-service/posinfo/terminal/store/printer',query:{title:'打印机',rpiNo:this.storeForm.rpiNo,rpsNo:this.storeForm.rpsNo}})
          break;
        case 4:
          this.getCashierPage();
          break;
        case 5:
          break;
      }
    },
    /**
     * @func 门店模块管理-2(终端管理)
     * @desc 终端管理 terminal
     * */
    getTerminalPage() {
      this.$router.push({
        path: '/rb-service/posinfo/pos_info_terminal_bind',
        query: {
          rpsNo: this.storeForm.rpsNo,
          rpsName: this.storeForm.rpsName
        },
      });
    },
    /**
     * @func 门店模块管理-4(收银员管理)
     * @desc 门店管理 store
     * */
    getCashierPage() {
      this.$router.push({
        name: "收银员管理",
        query: {
          rpiNo: this.storeForm.rpiNo,
          rpsNo: this.storeForm.rpsNo,
          rpsName: this.storeForm.rpsName
        },
      });
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.storeId = this.$route.query.storeNo;
      getDetail(this.storeId).then((res) => {
        this.storeForm = res.data.data;
        this.$nextTick(() => {
            this.storeForm.provinceCityArea = [
                this.storeForm.province,
                this.storeForm.city,
                this.storeForm.area,
            ];
        });
      });
    },
    handleClose(done) {
      this.emptyForm();
      done();
      this.infoData();
    },
    emptyForm() {
      this.$refs["tostoreForm"].$refs["storeForm"].resetFields();
      // this.$refs["toCardForm"].$refs["cardForm"].resetFields();
      // this.$refs["toRateForm"].$refs["rateForm"].resetFields();
      // this.$refs["toShopForm"].$refs["shopForm"].resetFields();
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
  }
  .cursor {
    cursor: pointer;
  }
}

.mer-m-b-8 {
  margin-bottom: 8px;
}

.img-margin-r10 {
  margin-right: 10px;
}
</style>